<template>
     <div>
        <div class="dynamic" v-for="(message,index) in messages" :key="message.id">
             <span  class="name">{{message.fromUserName}}</span>
             <span>在话题</span>
             <a  href="#" @click="problemList(message.topicId)" class="name">{{message.topicName}}</a>
             <span>提出了一个新问题: </span>
             <a href="#" @click="details(message.problemId)" class="problem">{{message.problemTitle}}</a>
            <span class="time">----{{message.createTime | timeFormater}}</span>
            <el-divider></el-divider>
        </div>
         <el-pagination
                 @current-change="pageChange"
                background
                layout="prev, pager, next"
                :page-size="8"
                :current-page.sync="currentPage"
                :total="total">
        </el-pagination>    
    </div>
</template>

<script>

import {postRequest,getRequest} from '../utils/api.js'

export default {
    name: 'FollowTopic',

    data() {
        return {
            messages:[],
             currentPage:1,//当前页码
            total:0, 
        };
    },

        mounted(){
            getRequest('/user/messagetopic/searchMessageTopics/'+this.currentPage).then((result) => {
                this.messages=result.data;
                this.total = result.total;
            }).catch((err) => {
                
            });
        },
    methods: {
        pageChange(current){
            getRequest('/user/messagetopic/searchMessageTopics/'+current).then((result) => {

                 this.messages=result.data;
                this.total = result.total;
            }).catch((err) => {
                
            });
        },
        details(id){            
            this.$bus.$emit('problemDetails',id);
        },
        problemList(id){
            this.$router.push({
                name:"problemList",
                query:{
                    id
                }
            })
        },
    },
};
</script>

<style  scoped>
.dynamic{
       margin-top: 10px;
    font-size: 18px;
}
.dynamic:after { 
    visibility: hidden; 
    display: block; 
    content: " "; 
    clear: both; 
    height: 0; 
    margin-bottom: 15px;
}

.dynamic a{
     text-decoration: none;
}
.name{
    color:#225599;
    margin-right: 13px;
    margin-left: 12px;
}

.problem{
    color:#225599;
    margin-left: 20px;
    line-height: 40px;
}
.time{
    font-size: 17px;
    float:right;
    margin-top: 12px;
}
</style>